export let MixinsStateFocusedAutoOpen = {
    methods: {
        dxStateFocusedAutoOpen(e) {
            if (this.isDevEnv) { return }
            // let pageVer = +window.pageMetaData.Header.Version;
            // if (pageVer < 1.3) { return; }
            e.component.option('openOnFieldClick', false);
            e.element.addEventListener('keyup', (event) => {
                if (event.keyCode == 13) {
                    if (false == e.component.option("opened") && true !== event.currentTarget.isMove) { e.component.open() }
                    else {
                        e.component.close()
                        event.currentTarget.isMove = false
                    }
                }
                if (event.keyCode == 38 || event.keyCode == 40) {
                    if (false == e.component.option("opened")) {
                        event.stopPropagation()
                        event.preventDefault()
                        e.component.open()
                    } else {
                        event.currentTarget.isMove = true
                    }
                }
            }, true)
            setTimeout(() => {
                const observer = new MutationObserver((mutationsList, observer) => {
                    // 遍历变化列表
                    for (const mutation of mutationsList) {
                        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
                            let component = e.component;
                            if (true !== component.option('disabled') && true !== component.option('readOnly')) {
                                if (e.element.classList.contains("dx-state-focused")) {
                                    if (true !== e.element.isOpened) {
                                        e.component.open()
                                        e.element.isOpened = true;
                                    } else {
                                        if (e.element.classList.contains("dx-state-active")) {
                                            e.component.open()
                                        }
                                    }
                                } else {
                                    e.element.isOpened = false;
                                }
                            }
                        }
                    }
                });

                const config = { attributes: true, attributeFilter: ['class'] };
                observer.observe(e.element, config);
                this.dxStateFocusedObserver = observer;
            }, 1000);
        },
        dxOnFocus(e){
            if(! this.formTabKey) return 
            this.formTabKey=false
            e.target.classList.add('Fas_Focus')
            e.target.classList.remove('Fas_Blur')
        },
        dxOnBlur(e){
            e.target.classList.remove('Fas_Focus')
            e.target.classList.add('Fas_Blur')
        },
        registerTabEvent(e){
            if(!e) return
            this._tabEventTargetElement = e
            e.addEventListener('focus',this.dxOnFocus)
            e.addEventListener('blur',this.dxOnBlur)
        
        },
        unRegisterTabEvent(){
            if(!this._tabEventTargetElement) return
            this._tabEventTargetElement.removeEventListener('focus',this.dxOnFocus)
            this._tabEventTargetElement.removeEventListener('blur',this.dxOnBlur)
            this._tabEventTargetElement=null
        }
    },
    mounted(){
        // 记录是否来源于 tab 只有来源tab 才显示边框
        document.addEventListener('keydown',(e)=>{
            if(e.keyCode == 9){
                this.formTabKey = true
                setTimeout(() => {
                    this.formTabKey = false
                }, 100);
            }
        })
    },
    destroyed() {
        if (this.dxStateFocusedObserver && this.dxStateFocusedObserver.disconnect) {
            this.dxStateFocusedObserver.disconnect();
        }
        this.unRegisterTabEvent()
    },
}